<script setup>
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import Card from '@/views/new-screen/components/card.vue'
import DrawEcharts from '@/components/draw-echarts.vue'
import * as echarts from 'echarts'
import total from '../../../../assets/imgs/lj_nor.png'
import {
  getDangerTotalData,
  getScreenAlterTotal,
} from '@/api/screen/home/index.js'
import { ElMessage } from 'element-plus'
import {
  getDeviceTypeStatistic,
  getWarnTendency,
} from '@/api/screen/home/index'
import mitter from '@/utils/eventBus'

const props = defineProps({
  isExpanded: Boolean,
  activePark: String,
})

const currentDate = new Date()

const recentDays = ref([])

// 循环生成最近的 10 天日期
for (let i = 0; i < 10; i++) {
  const date = new Date(currentDate)
  date.setDate(currentDate.getDate() - i)
  recentDays.value.push(date)
}

const formattedDates = recentDays.value.map((date) => {
  // const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${month}-${day}`
})

const xAxisData = [
  '监控视频',
  '电子围栏',
  '无人道闸',
  '人员门禁',
  '危房监测',
  '边坡监测',
]

const deviceData = [41, 30, 38, 18, 40, 40]
const warningData = [24, 34, 23, 26, 25, 29]
const deviceOptions = {
  backgroundColor: 'transparent',
  legend: {
    right: '3%',
    top: '0',
    itemWidth: 12,
    itemHeight: 12,
    icon: 'square',
    textStyle: { color: '#DAECFF' },
    data: [
      {
        name: '设备数量',
      },
      // {
      //   name: '当前报警设备数',
      // },
    ],
  },
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      let tipStr = ''
      let totalNum = 0
      for (let i = 0; i < params.length; i++) {
        totalNum += params[i].value
        if (params[i].seriesName !== '合计') {
          tipStr += params[i].seriesName + '：' + params[i].value + '</br>'
        }
      }
      for (let i = 0; i < params.length; i++) {
        totalNum += params[i].value
        if (params[i].seriesName === '合计') {
          tipStr += '合计：' + totalNum
        }
      }
      return tipStr
    },
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  grid: {
    left: '20%',
    right: '10%',
    bottom: '50',
    top: '25%',
  },
  xAxis: {
    type: 'category',
    data: [],
    axisLine: {
      lineStyle: {
        color: '#0D3562',
      },
    },

    axisLabel: {
      show: true,
      color: '#C4EAFF',
      fontSize: 12,
      interval: 0,
      rotate: 30,
    },
    show: true,
  },
  yAxis: [
    {
      axisLine: {
        show: false,
      },
      type: 'value',
      axisLabel: {
        show: true,
        color: '#C4EAFF',
        fontSize: 12,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#1E303F',
          width: 1,
          type: 'dashed',
        },
      },
    },
    {
      axisLine: {
        show: false,
      },
      type: 'value',
      axisLabel: {
        show: true,
        color: '#C4EAFF',
        fontSize: 12,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#1E303F',
          width: 1,
          type: 'dashed',
        },
      },
    },
  ],
  series: [
    {
      data: [],
      name: '设备数量',
      type: 'bar',
      barWidth: 15,
      barGap: '100%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          {
            offset: 0,
            color: '#2B4C73', // 起始颜色
          },
          {
            offset: 1,
            color: '#178FFF', // 结束颜色
          },
        ]),
      },
    },
    // {
    //   name: '当前报警设备数',
    //   data: warningData,
    //   yAxisIndex: 1,
    //   type: 'line',
    //   barGap: '100%',
    //   lineStyle: {
    //     color: '#F7AD69',
    //   },
    //   itemStyle: {
    //     color: '#F7AD69',
    //     borderColor: '#F7AD69',
    //     borderWidth: 2,
    //   },
    //   label: {
    //     show: true,
    //     position: 'top',
    //     distance: 10,
    //     color: '#C4EAFF',
    //     fontSize: 12,
    //     formatter: (params) => {
    //       const index = xAxisData.findIndex((item) => params.name === item)
    //       return deviceData[index] + warningData[index]
    //     },
    //   },
    // },
  ],
}

const eventInfoList = ref([
  {
    name: '当前报警总数',
    value: '0',
    color: '#fff',
    key: 'total',
  },
  {
    name: '本日报警数',
    value: '0',
    color: '#fff',
    key: 'todaytotal',
  },
  {
    name: '本月报警数',
    value: '0',
    color: '#fff',
    key: 'monthtotal',
  },
])

const getEventInfoListData = () => {
  getScreenAlterTotal({
    parkId: props.activePark,
  }).then((res) => {
    if (res.success) {
      eventInfoList.value =
        eventInfoList.value?.map((item) => {
          return {
            ...item,
            value: res.data[item.key],
          }
        }) || []
    } else {
      ElMessage.error(res.message)
    }
  })
}

let diff = [
  { name: '外来人员', value: 10, unit: '' },
  { name: '人员闯入', value: 90, unit: '' },
  { name: '抽烟', value: 80, unit: '' },
  { name: '攀爬', value: 70, unit: '' },
  { name: '烟雾及烟火', value: 60, unit: '' },
  { name: '安全通道占用', value: 78, unit: '' },
]

const trendOptions = {
  backgroundColor: 'transparent',
  //你的代码
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(13, 64, 71, 0.50)',
    borderColor: 'rgba(143, 225, 252, 0.60)',
    padding: 8,
    textStyle: {
      color: '#fff',
    },
  },
  legend: {
    data: ['危房报警', '边坡报警', '安防事件报警'],
    icon: 'rect',
    right: '3%',
    top: '5%',
    itemWidth: 12,
    itemHeight: 12,
    textStyle: {
      fontSize: 14,
      color: '#FFFFFF',
    },
  },
  grid: {
    left: '20%',
    right: '2%',
    bottom: '30',
    top: '25%',
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      boundaryGap: false,
      axisPointer: {
        type: 'shadow',
      },
      axisLabel: {
        color: '#F5F5F5', //更改坐标轴文字颜色
        fontSize: 12, //更改坐标轴文字大小
        interval: 0,
        rotate: 30,
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        color: '#F5F5F5', //更改坐标轴文字颜色
        fontSize: 12, //更改坐标轴文字大小
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(30, 48, 63, 1)',
          type: 'dashed',
        },
      },
    },

    // 折线部分
    {
      type: 'value',
      name: '',
      axisLabel: {
        show: false,
        color: '#F5F5F5', //更改坐标轴文字颜色
        fontSize: 12, //更改坐标轴文字大小
        formatter: '{value} %',
      },
      splitLine: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: '危房报警',
      type: 'line',
      showSymbol: false,
      itemStyle: {
        shadowColor: '#fff',
        shadowBlur: 5,
        color: '#50FEA3',
      },
      lineStyle: {
        width: 1,
        color: '#50FEA3',
      },
      areaStyle: {
        width: 4,
        // opacity: 0.1,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(80,254,163, 1)' },
            { offset: 1, color: 'rgba(80,254,163, 0.1)' },
          ],
          global: false,
        },
      },
      // 实现数字展示在柱状图
      label: {
        show: false,
        position: 'top',
        fontSize: 12,
        color: '#F5F5F5',
        offset: [0, -10],
        formatter: '{c}', //添加单位
      },
      data: [],
    },
    {
      name: '边坡报警',
      type: 'line',
      showSymbol: false,
      itemStyle: {
        shadowColor: '#fff',
        shadowBlur: 5,
        color: '#FF6059',
      },
      lineStyle: {
        width: 1,
        color: '#FF6059',
      },
      areaStyle: {
        width: 4,
        // opacity: 0.1,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(255,96,89, 1)' },
            { offset: 1, color: 'rgba(255,96,89, 0.1)' },
          ],
          global: false,
        },
      },
      label: {
        show: false,
        position: 'top',
        fontSize: 12,
        color: '#F5F5F5',
        offset: [0, -10],
        formatter: '{c}', //添加单位
      },
      data: [],
    },

    // 折线部分
    {
      name: '安防事件报警',
      type: 'line',
      showSymbol: false,
      itemStyle: {
        shadowColor: '#fff',
        shadowBlur: 5,
        color: '#FAB54F',
      },
      lineStyle: {
        width: 1,
        color: '#FAB54F',
      },
      areaStyle: {
        width: 4,
        // opacity: 0.1,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 1, color: 'rgba(0,0,0, 1)' },
            { offset: 0, color: 'rgba(250,181,79, 1)' },
          ],
          global: false,
        },
      },
      label: {
        show: false,
        position: 'top',
        color: '#F5F5F5',
        formatter: '{c}%', //添加单位
      },
      data: [],
    },
  ],
}

const eventNumList = ref([
  {
    img: total,
    name: '巡查隐患',
    key: 'xcyh',
    value: 2,
  },
  {
    img: total,
    name: '上报隐患',
    key: 'upyh',
    value: 2,
  },
  {
    img: total,
    name: '设备报警',
    key: 'sbyh',
    value: 102,
  },
])

const warningTotal = ref(0)

const getEventNumDataList = () => {
  getDangerTotalData({
    parkId: props.activePark,
    type: dateSelect.value,
  }).then((res) => {
    if (res.success) {
      console.log(res.data)
      const data = res.data || {}
      eventNumList.value = eventNumList.value.map((item) => {
        return {
          ...item,
          value: data[item.key] || 0,
        }
      })
      warningTotal.value = data.yhzs
      eventTaskOptions.value = eventTaskOptions.value.map((item) => {
        return {
          ...item,
          value: data[item.key],
          percent: warningTotal.value
            ? ((data[item.key] / warningTotal.value) * 100).toFixed(2)
            : 0,
        }
      })
      event3DOptions.value = getPie3D(eventTaskOptions.value, 0.95)
    } else {
      ElMessage.error(res.data)
    }
  })
}

const eventTaskOptions = ref([
  {
    name: '待申请', //名称
    value: 100, //值
    percent: 58,
    key: 'dsq',
    itemStyle: {
      //颜色
      color: '#50FEA3',
    },
  },
  {
    name: '进行中',
    value: 80,
    percent: 30,
    key: 'jxz',
    itemStyle: {
      color: '#36D5F0',
    },
  },
  {
    name: '已完成',
    value: 60,
    percent: 12,
    key: 'ywc',
    itemStyle: {
      color: '#FAB54F',
    },
  },
])

let event3DOptions = ref('')

const getPie3D = (pieData, internalDiameterRatio) => {
  let series = []
  let sumValue = 0
  let startValue = 0
  let endValue = 0
  let legendData = []
  let legendBfb = []
  let k = 1 - internalDiameterRatio
  pieData.sort((a, b) => {
    return b.value - a.value
  })
  // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
  for (let i = 0; i < pieData.length; i++) {
    sumValue += pieData[i].value
    let seriesItem = {
      //系统名称
      name:
        typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
      type: 'surface',
      //是否为参数曲面（是）
      parametric: true,
      //曲面图网格线（否）上面一根一根的
      wireframe: {
        show: false,
      },
      pieData: pieData[i],
      pieStatus: {
        selected: false,
        hovered: false,
        k: k,
      },
      //设置饼图在容器中的位置(目前没发现啥用)
      // center: ['80%', '100%'],
      radius: ['40%', '80%'],
    }

    //曲面的颜色、不透明度等样式。
    if (typeof pieData[i].itemStyle != 'undefined') {
      let itemStyle = {}
      typeof pieData[i].itemStyle.color != 'undefined'
        ? (itemStyle.color = pieData[i].itemStyle.color)
        : null
      typeof pieData[i].itemStyle.opacity != 'undefined'
        ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
        : null
      seriesItem.itemStyle = itemStyle
      // seriesItem.radius = ['70%', '90%']
    }
    series.push(seriesItem)
  }

  // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
  // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
  legendData = []
  legendBfb = []
  for (let i = 0; i < series.length; i++) {
    endValue = startValue + series[i].pieData.value
    series[i].pieData.startRatio = startValue / sumValue
    series[i].pieData.endRatio = endValue / sumValue
    series[i].parametricEquation = getParametricEquation(
      series[i].pieData.startRatio,
      series[i].pieData.endRatio,
      false,
      false,
      k,
      series[i].pieData.value,
    )
    startValue = endValue
    let bfb = fomatFloat(series[i].pieData.value / sumValue, 4)
    legendData.push({
      name: series[i].name,
      value: bfb,
    })
    legendBfb.push({
      name: series[i].name,
      value: bfb,
    })
  }

  //(第二个参数可以设置你这个环形的高低程度)
  let boxHeight = getHeight3D(series, 10) //通过传参设定3d饼/环的高度
  // 准备待返回的配置项，把准备好的 legendData、series 传入。
  let option = {
    backgroundColor: 'transparent',
    //移动上去提示的文本内容(我没来得及改 你们可以根据需求改)
    tooltip: {
      formatter: (params) => {
        if (
          params.seriesName !== 'mouseoutSeries' &&
          params.seriesName !== 'pie2d'
        ) {
          let bfb = (
            (option.series[params.seriesIndex].pieData.endRatio -
              option.series[params.seriesIndex].pieData.startRatio) *
            100
          ).toFixed(2)
          return (
            `${params.seriesName}<br/>` +
            `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
            `${bfb}`
          )
        }
      },
    },
    labelLine: {
      show: true,
      lineStyle: {
        color: '#7BC0CB',
      },
    },
    label: {
      show: true,
      position: 'outside',
      formatter: '{b} \n{c} {d}%',
    },
    //这个可以变形
    xAxis3D: {
      min: -1,
      max: 1,
    },
    yAxis3D: {
      min: -1,
      max: 1,
    },
    zAxis3D: {
      min: -1,
      max: 1,
    },
    //此处是修改样式的重点
    grid3D: {
      show: false,
      boxHeight: boxHeight, //圆环的高度
      //这是饼图的位置
      top: '0%',
      left: '0%',
      viewControl: {
        //3d效果可以放大、旋转等，请自己去查看官方配置
        alpha: 25, //角度(这个很重要 调节角度的)
        distance: 105, //调整视角到主体的距离，类似调整zoom(这是整体大小)
        rotateSensitivity: 0, //设置为0无法旋转
        zoomSensitivity: 0, //设置为0无法缩放
        panSensitivity: 0, //设置为0无法平移
        autoRotate: false, //自动旋转
      },
    },
    series: series,
  }
  return option
}
//获取3d丙图的最高扇区的高度
const getHeight3D = (series, height) => {
  series.sort((a, b) => {
    return b.pieData.value - a.pieData.value
  })
  return 1.5
}
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
const getParametricEquation = (
  startRatio,
  endRatio,
  isSelected,
  isHovered,
  k,
  h,
) => {
  // 计算
  let midRatio = (startRatio + endRatio) / 2
  let startRadian = startRatio * Math.PI * 2
  let endRadian = endRatio * Math.PI * 2
  let midRadian = midRatio * Math.PI * 2
  // 如果只有一个扇形，则不实现选中效果。
  if (startRatio === 0 && endRatio === 1) {
    isSelected = false
  }
  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
  k = typeof k !== 'undefined' ? k : 1 / 3
  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
  let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
  let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
  // 计算高亮效果的放大比例（未高亮，则比例为 1）
  let hoverRate = isHovered ? 1.05 : 1
  // 返回曲面参数方程
  return {
    u: {
      min: -Math.PI,
      max: Math.PI * 3,
      step: Math.PI / 32,
    },
    v: {
      min: 0,
      max: Math.PI * 2,
      step: Math.PI / 20,
    },
    x: function (u, v) {
      if (u < startRadian) {
        return (
          offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
        )
      }
      if (u > endRadian) {
        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
      }
      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
    },
    y: function (u, v) {
      if (u < startRadian) {
        return (
          offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
        )
      }
      if (u > endRadian) {
        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
      }
      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
    },
    z: function (u, v) {
      if (u < -Math.PI * 0.5) {
        return Math.sin(u)
      }
      if (u > Math.PI * 2.5) {
        return Math.sin(u) * h * 0.1
      }
      return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
    },
  }
}
//这是一个自定义计算的方法
const fomatFloat = (num, n) => {
  var f = parseFloat(num)
  if (isNaN(f)) {
    return false
  }
  f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
  var s = f.toString()
  var rs = s.indexOf('.')
  //判定如果是整数，增加小数点再补0
  if (rs < 0) {
    rs = s.length
    s += '.'
  }
  while (s.length <= rs + n) {
    s += '0'
  }
  return s
}

event3DOptions.value = getPie3D(eventTaskOptions.value, 0.95)

const dateSelect = ref('day')

watch(
  () => dateSelect.value,
  (val) => {
    if (val) {
      getEventNumDataList()
    }
  },
)

const deviceChartRef = ref(null)

const trendChartRef = ref(null)

const getDeviceTypeList = (id) => {
  const params = {
    parkId: id,
  }
  getDeviceTypeStatistic(params).then((res) => {
    if (res.data) {
      deviceOptions.xAxis.data = res.data.map((item) => {
        return item.content
      })
      deviceOptions.series[0].data = res.data.map((item) => {
        return item.devicecount
      })
    } else {
      deviceOptions.xAxis[0].data = []
      deviceOptions.series[0].data = []
    }
    nextTick(() => {
      deviceChartRef.value?.updateOption(deviceOptions)
    })
  })
}

const getWarnTendencyList = (id) => {
  trendOptions.xAxis[0].data = formattedDates
  const params = {
    parkId: id,
  }
  getWarnTendency(params).then((res) => {
    const house = res.data['危房报警']
    const slope = res.data['边坡报警']
    const safe = res.data['安防事件报警']
    house
      ? (trendOptions.series[0].data = setData(house))
      : (trendOptions.series[0].data = [])
    slope
      ? (trendOptions.series[1].data = setData(slope))
      : (trendOptions.series[1].data = [])
    safe
      ? (trendOptions.series[2].data = setData(safe))
      : (trendOptions.series[2].data = [])
    nextTick(() => {
      trendChartRef.value?.updateOption(trendOptions)
    })
  })
}

const setData = (arr) => {
  const datas = arr.map((item) => {
    return {
      day: item.yearmonthday.substring(5),
      count: item.devicecount,
    }
  })
  let result = []
  formattedDates.forEach((item) => {
    const value = datas.find((i) => i.day === item)?.count
    value > -1 ? result.push(value) : result.push(0)
  })
  return result
}

watch(
  () => props.activePark,
  (val) => {
    if (val) {
      getWarnTendencyList(props.activePark)
      getDeviceTypeList(props.activePark)
      getEventInfoListData()
      getEventNumDataList()
    }
  },
)

const handleInfoItemClick = (index) => {
  if (index !== 0) {
    return
  }
  if (!Number(eventInfoList.value[index].value)) {
    ElMessage.error('无报警数据')
    return
  }
  mitter.emit('showAlarmEvent', props.activePark)
}

onMounted(() => {
  getWarnTendencyList(props.activePark)
  getDeviceTypeList(props.activePark)
})
onMounted(() => {
  getEventInfoListData()
  getEventNumDataList()
})

onUnmounted(() => {})
</script>

<template>
  <div :class="['left', isExpanded ? 'active' : '']">
    <card name="报警事件统计" class="police-event">
      <template #title>
        <i class="title-icon"></i>
      </template>
      <div class="statistic">
        <div class="left-icon"></div>
        <div class="right-info">
          <div
            class="info-item"
            v-for="(item, index) in eventInfoList"
            :key="index"
            :class="{ clickable: index === 0 }"
            @click="handleInfoItemClick(index)"
          >
            <div class="name">{{ item.name }}</div>
            <div class="value-area">
              <span class="value" :style="{ color: item.color }">{{
                item.value
              }}</span>
              <span class="unit">起</span>
            </div>
          </div>
        </div>
      </div>
      <div class="trend">
        <div class="statistic-title">
          <div class="title-area">
            <span class="title">报警趋势（近10日）</span>
          </div>
          <div class="right-area"></div>
        </div>
        <div class="trend-chart">
          <draw-echarts
            ref="trendChartRef"
            width="400"
            height="200"
            :options="trendOptions"
          ></draw-echarts>
        </div>
      </div>
      <div class="device">
        <div class="statistic-title">
          <div class="title-area">
            <span class="title">设备分类统计</span>
          </div>
          <div class="right-area"></div>
        </div>
        <div class="device-chart">
          <draw-echarts
            ref="deviceChartRef"
            width="400"
            height="220"
            :options="deviceOptions"
          ></draw-echarts>
        </div>
      </div>
    </card>
    <card name="隐患处理进度" class="device-statistics">
      <template #title>
        <i class="title-icon"></i>
      </template>
      <template #right>
        <div class="right-area">
          <div class="right-tabs">
            <div
              class="right-tab"
              :class="dateSelect == 'day' ? 'is-active' : ''"
              @click="dateSelect = 'day'"
            >
              本日
            </div>
            <div
              class="right-tab"
              :class="dateSelect == 'week' ? 'is-active' : ''"
              @click="dateSelect = 'week'"
            >
              本周
            </div>
            <div
              class="right-tab"
              :class="dateSelect == 'month' ? 'is-active' : ''"
              @click="dateSelect = 'month'"
            >
              本月
            </div>
          </div>
        </div>
      </template>
      <div class="events">
        <div
          class="event"
          v-for="(item, index) in eventNumList"
          :key="index"
          :style="{ backgroundImage: `url(${item.img})` }"
        >
          <div class="event-info">
            <div class="event-info-name">{{ item.name }}</div>
            <div class="event-info-value">
              <span>{{ item.value }}</span
              >起
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="statistic-title">
        <div class="title-area">
          <span class="title">报警状态统计</span>
        </div>
        <div class="right-area"></div>
      </div> -->
      <div class="inspection">
        <div class="inspection-left">
          <div class="inspection-left-top">
            <div class="total-num">
              <div class="value">
                <span>{{ warningTotal }}</span
                >个
              </div>
              <div class="name">隐患总数</div>
            </div>
            <draw-echarts
              width="200"
              height="130"
              v-if="event3DOptions"
              :options="event3DOptions"
            ></draw-echarts>
          </div>
          <div class="inspection-left-bottom"></div>
        </div>
        <div class="inspection-right">
          <div
            class="inspection-right-line"
            v-for="(item, index) in eventTaskOptions"
            :key="index"
            :style="{ color: item.itemStyle.color }"
          >
            <div
              class="left-icon"
              :style="{ backgroundColor: item.itemStyle.color }"
            ></div>
            <div class="name">{{ item.name }}</div>
            <div class="value">{{ item.value }}个</div>
            <div class="percent">{{ item.percent }}%</div>
          </div>
        </div>
      </div>
    </card>
  </div>
</template>

<style scoped lang="scss">
.left {
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }

  .device-statistics {
    // background-image: url('@/assets/imgs/box_sbfltj.png');
    height: 313px;
    margin-bottom: var(--card-margin-bottom);

    .title-icon {
      width: 142px;
      background-image: url('@/assets/imgs/yhcljd_title.png');
    }

    .statistic-title {
      display: flex;
      justify-content: space-between;

      .title-area {
        display: flex;
        height: 16px;
        align-items: center;
        width: 230px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url('@/assets/imgs/img_fbt.png');
        padding-left: 20px;

        // .icon {
        //   width: 16px;
        //   height: 16px;
        //   background-size: 100% 100%;
        //   background-repeat: no-repeat;
        //   background-image: url('@/assets/imgs/img_xbt.png');
        // }

        .title {
          font-family: Source Han Sans SC;
          font-weight: 500;
          color: #fff;
          font-weight: bold;
          font-size: 16px;
          color: #00a6ff;
          background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          margin-bottom: 5px;
        }
      }
    }

    .right-area {
      .right-tabs {
        background-image: url('@/assets/imgs/tab_d.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 32px;
        width: 147px;
        display: flex;

        .right-tab {
          height: 100%;
          width: 33%;
          text-align: center;
          font-family: Source Han Sans SC;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          line-height: 32px;
          cursor: pointer;
        }

        .is-active {
          background-image: url('@/assets/imgs/tab_sel.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }
    }

    .events {
      display: flex;
      height: 110px;
      align-items: center;
      justify-content: space-around;
      margin-bottom: 6px;
      .event {
        width: 124px;
        height: 54px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: flex-end;
        &-info {
          width: 80%;
          height: 100%;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          &-name {
            line-height: 20px;
            height: 20px;
          }
          &-value {
            line-height: 30px;
            height: 30px;
            span {
              font-family: Source Han Sans SC;
              font-weight: bold;
              font-size: 20px;
              color: #36d5f0;
              margin-right: 4px;
            }
          }
        }
      }
    }

    .inspection {
      height: 140px;
      display: flex;
      margin-bottom: 10px;

      &-left {
        width: 50%;
        height: 100%;

        &-top {
          width: 100%;
          height: 100%;
          z-index: 10;
          // background-color: transparent;
          position: relative;

          .total-num {
            color: #ffffff;
            position: absolute;
            width: 80%;
            left: 10%;
            text-align: center;
            top: 33.5%;
            z-index: 100;

            .value {
              color: #b2c9df;

              span {
                color: #ffffff;
                font-size: 26px;
              }
            }

            .name {
            }
          }

          :deep(.echarts-container) {
            z-index: 10;
            // background-color: transparent;
          }
        }

        &-bottom {
          width: 100%;
          height: 100%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-image: url('@/assets/imgs/img_bt_d.png');
          position: relative;
          bottom: 80%;
          right: 5px;
          z-index: 0;
        }
      }

      &-right {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        // align-items: center;
        &-line {
          display: flex;
          height: 30px;
          align-items: center;
          font-weight: 500;
          font-size: 12px;

          .left-icon {
            width: 8px;
            height: 8px;
          }

          .name {
            color: #c4eaff;
            margin-left: 20px;
            width: 60px;
          }

          .value {
            width: 40px;
            margin-left: 20px;
          }

          .percent {
            margin-left: 10px;
          }
        }
      }
    }
  }

  .police-event {
    // background-image: url('@/assets/imgs/box_bjsjtj.png');
    height: 631px;

    .title-icon {
      width: 152px;
      background-image: url('@/assets/imgs/bjsjtj_title.png');
    }

    .statistic {
      margin-left: 19px;
      width: 95%;
      height: 100px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url('@/assets/imgs/img_bj.png');

      display: flex;
      align-items: center;

      .left-icon {
        width: 80px;
      }

      .right-info {
        width: calc(100% - 80px);
        height: 100%;
        color: white;
        align-items: center;
        display: flex;
        justify-content: space-around;
        margin-top: 5px;

        .name {
          margin-bottom: 8px;
          font-size: 12px;
        }

        .value {
          margin-right: 4px;
          font-size: 24px;
        }

        .unit {
          font-size: 12px;
          color: #c4eaff;
        }

        .info-item.clickable {
          cursor: pointer;
        }
      }
    }

    .statistic-title {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;

      .title-area {
        display: flex;
        height: 16px;
        align-items: center;
        width: 230px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url('@/assets/imgs/img_fbt.png');
        padding-left: 20px;

        // .icon {
        //   width: 16px;
        //   height: 16px;
        //   background-size: 100% 100%;
        //   background-repeat: no-repeat;
        //   background-image: url('@/assets/imgs/img_xbt.png');
        // }

        .title {
          font-family: Source Han Sans SC;
          font-weight: 500;
          color: #fff;
          font-weight: bold;
          font-size: 16px;
          color: #00a6ff;
          background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          margin-bottom: 5px;
        }
      }

      .right-area {
        .right-tabs {
          background-image: url('@/assets/imgs/tab_d.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          height: 32px;
          width: 147px;
          display: flex;

          .right-tab {
            height: 100%;
            width: 33%;
            text-align: center;
            font-family: Source Han Sans SC;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            line-height: 32px;
            cursor: pointer;
          }

          .is-active {
            background-image: url('@/assets/imgs/tab_sel.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
        }

        // :deep(.el-radio-group) {
        //   .el-radio-button {
        //     --el-radio-button-checked-border-color: #0066d9;
        //   }

        //   .el-radio-button.is-active {
        //     color: white;

        //     .el-radio-button__inner {
        //       color: white;
        //       background-image: url('@/assets/imgs/tab_sel.png');
        //       background-repeat: no-repeat;
        //       background-size: 100% 100%;
        //     }
        //   }

        //   .el-radio-button__inner {
        //     border-color: rgba(41, 88, 147, 1);
        //     height: 32px;
        //     width: 48px;
        //     --el-border-radius-base: 0;
        //     --el-fill-color-blank: rgba(0, 31, 54, 1);
        //     --el-button-bg-color: rgba(0, 31, 54, 1);
        //     display: flex;
        //     align-items: center;
        //     justify-content: center;
        //     color: rgba(147, 181, 201, 1);

        //     .svg-icon {
        //       width: 16px;
        //       height: 14px;
        //     }
        //   }
        // }
      }
    }

    .trend {
      margin-top: 10px;

      .statistic-title {
        margin-left: 19px;
      }
    }

    .device {
      .statistic-title {
        margin-left: 19px;
      }
      .device-chart {
        padding: 0 10px;
      }
    }
  }
}
</style>
